<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            label-width="auto"
            label-position="right"
            v-show="showSearch"
        >
            <el-row>
                <el-form-item label="盘点日期" style="width: 308px">
                    <el-date-picker
                        v-model="dateRange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="盘点单编码" prop="inventorytCode">
                    <el-input
                        v-model.trim="queryParams.inventorytCode"
                        style="width: 180px"
                        placeholder="请输入盘点单编码"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="物料名称" prop="materialName">
                    <el-input
                        v-model.trim="queryParams.materialName"
                        style="width: 180px"
                        placeholder="请输入物料名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <div class="operation">
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <el-button @click="advanced = !advanced">
                        <a style="color: #448ef7">
                            <el-icon v-if="advanced">
                                <ArrowUpBold />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowDownBold />
                            </el-icon>
                        </a>
                    </el-button>
                    <right-toolbar
                        style="margin-left: 10px"
                        :search="false"
                        v-model:showSearch="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </div>
            </el-row>
            <el-row v-if="advanced">
                <el-form-item label="规格型号" prop="specs">
                    <el-input
                        v-model.trim="queryParams.specs"
                        style="width: 180px"
                        placeholder="请输入规格型号"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
            </el-row>
        </el-form>
        <div>
            <el-table v-loading="loading" border :data="dataList">
                <el-table-column label="序号" width="60" type="index" align="center" />
                <el-table-column
                    v-if="columns[0].visible"
                    label="盘点单编码"
                    min-width="150"
                    align="center"
                    prop="inventorytCode"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="handleReturnCode(row)" text>
                            {{ row.inventorytCode }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[1].visible"
                    label="盘点日期"
                    min-width="150"
                    align="center"
                    prop="inventoryDate"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="columns[2].visible"
                    label="物料分类"
                    min-width="150"
                    align="center"
                    prop="className"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="columns[3].visible"
                    label="物料编码"
                    min-width="150"
                    align="center"
                    prop="materialCode"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="handleMaterialCode(row)" text>
                            {{ row.materialCode }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[4].visible"
                    label="物料名称"
                    min-width="150"
                    align="center"
                    prop="materialName"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="columns[5].visible"
                    label="规格型号"
                    min-width="150"
                    align="center"
                    prop="specs"
                    :show-overflow-tooltip="true"
                >
                    <!-- <template #default="scope">
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </template> -->
                </el-table-column>
                <el-table-column
                    v-if="columns[6].visible"
                    label="单位"
                    min-width="150"
                    align="center"
                    prop="unit"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_material_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[7].visible"
                    label="盘点数量"
                    min-width="120"
                    align="center"
                    prop="quantity"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    v-if="columns[8].visible"
                    label="单价"
                    min-width="120"
                    align="center"
                    prop="price"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="columns[9].visible"
                    label="盘点金额"
                    min-width="120"
                    align="center"
                    prop="amount"
                    :show-overflow-tooltip="true"
                ></el-table-column>

                <el-table-column
                    v-if="columns[10].visible"
                    width="120"
                    label="制单人"
                    align="center"
                    prop="createBy"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    v-if="columns[11].visible"
                    width="100"
                    label="备注"
                    align="center"
                    prop="remark"
                    :show-overflow-tooltip="true"
                />
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script setup name="searchReturnSlip">
import { detailMaterialinventory } from '@/api/storage/MaterialInventorySheet.js'
import { deptTreeSelect } from '@/api/system/user'
const { proxy } = getCurrentInstance()

const { mes_material_unit } = proxy.useDict('mes_material_unit')
const loading = ref(true)
const dataList = ref([])
const showSearch = ref(true)
const router = useRouter()
const total = ref(0)
const advanced = ref(false)
const deptOptions = ref([])

// 列显隐信息
const columns = ref([
    { key: 0, label: `盘点单编码`, visible: true },
    { key: 1, label: `盘点日期`, visible: true },
    { key: 2, label: `物料分类`, visible: true },
    { key: 3, label: `物料编码`, visible: true },
    { key: 4, label: `物料名称`, visible: true },
    { key: 5, label: `规格型号`, visible: true },

    { key: 6, label: `单位`, visible: true },
    { key: 7, label: `盘点数量`, visible: true },
    { key: 8, label: `单价`, visible: true },
    { key: 9, label: `盘点金额`, visible: true },
    { key: 10, label: `制单人`, visible: true },
    { key: 11, label: `备注`, visible: true },
])

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
    },
})

const getDateNow = () => {
    var myDate = new Date()
    var year = myDate.getFullYear()
    var month = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月，所以要加1);
    var day = myDate.getDate() //获取当前日（1-31）
    if (month < 10) {
        month = '0' + month
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day
    }
    var firstDay = year + '-' + month + '-01'
    return firstDay
}
const getCurrentDay = () => {
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1 // 月份从0开始，需要加1
    var day = now.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day
    }
    var hour = 23
    var mm = 59
    var ss = 59
    const currentDay = `${year}-${month}-${day} ${hour}:${mm}:${ss}`
    return currentDay
}
const dateRange = ref([getDateNow(), getCurrentDay()])
const { queryParams } = toRefs(data)

function getDeptTree() {
    deptTreeSelect().then(response => {
        deptOptions.value = response.data
    })
}
const getList = () => {
    loading.value = true
    detailMaterialinventory({
        ...queryParams.value,
        beginTime: Array.isArray(dateRange.value) ? dateRange.value[0] : undefined,
        endTime: Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined,
    })
        .then(res => {
            loading.value = false
            dataList.value = res.rows
            total.value = res.total
        })
        .catch(err => {
            loading.value = false
        })
}

// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    dateRange.value = [getDateNow(), getCurrentDay()]
    proxy.resetForm('queryRef')
    handleQuery()
}

const handleReturnCode = row => {
    // router.push({
    //     path: '/storage/MaterialInventorySheet',
    //     query: {
    //         code: row.inventorytCode
    //     }
    // })

    router.push({
        path: '/storage/MaterialInventorySheet/details',
        query: {
            id: row.inventoryId,
            readonly: true,
            code: row.inventorytCode,
            moduleCode: 'searchMaterialInventorySheet',
        },
    })
}
const handleSupplierCode = row => {
    router.push({
        path: '/basicInfo/supplier',
        query: {
            supplierCode: row.supplierCode,
        },
    })
}
const handleMaterialCode = row => {
    // router.push({
    //     path: '/basicInfo/accessory',
    //     query: {
    //         materialCode: row.materialCode,
    //     }
    // })
    router.push({
        path: '/basicInfo/accessory/details',
        query: {
            id: row.materialId,
            readonly: true,
            code: row.materialCode,
            moduleCode: 'searchMaterialInventorySheet',
        },
    })
}

getDeptTree()
getList()
</script>

<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}
</style>
